<template>
	<view class="good-detail">
		<img :src="goodInfo.dyGoodsImages || '/static/image/goodImg.jpg'" style="width: 750rpx;" mode="widthFix" alt=""
			srcset="" />
		<view class="" style="background-color: #fff; padding: 36rpx;">
			<view class="good-detail-price">
				<dy-price :current-price="goodInfo.price" :original-price="goodInfo.purchasePrice"></dy-price>
			</view>
			<view class="">
				<u--text :text="goodInfo.goodsName" size="22" class="theme-font" margin="15rpx 25rpx 25rpx"></u--text>
				<!-- <u--text type="info" :text="goodInfo.desc" size="14" margin="5rpx 25rpx"></u--text> -->
				<u--text type="info" text="免费上门·不满意重洗·洗坏包赔" size="14" margin="5rpx 25rpx"></u--text>

			</view>
		</view>
		<view class="good-detail--selected" @click="showBuyPopup">
			<u--text :text="`已选服务： ${goodInfo.goodsName}`" size="16" margin="15rpx 25rpx 25rpx"></u--text>
		</view>
		<view class="good-detail-imgs">
			<image :src="`${staticUrl}/images/goods/detail1.jpg`" style="width: 700rpx;" mode="widthFix" alt="" srcset="" />
			<image :src="`${staticUrl}/images/goods/detail2.jpg`" style="width: 700rpx;" mode="widthFix" alt="" srcset="" />
			<image :src="`${staticUrl}/images/goods/detail3.jpg`" style="width: 700rpx;" mode="widthFix" alt="" srcset="" />
			<image :src="`${staticUrl}/images/goods/detail4.jpg`" style="width: 700rpx;" mode="widthFix" alt="" srcset="" />
		</view>

		<view class="bottom-bar flex-primary" :style="bottomBarStyle">
	<!-- 		<button class="customer-btn" open-type="im" data-im-id="dy56m8q7gtyc"><u-icon name="chat" color="#999" size="33"></u-icon>
			</button> -->
			<view class="bottom-bar-btn" @click="showBuyPopup">
				立即购买
			</view>
		</view>
		<ImButton />
		
		<uni-popup ref="buyPopupRef" background-color="#fff">
			<view class="popup-wrapper">
				<view class="popup-header flex-primary">
					<dy-price :current-price="goodInfo.price" :original-price="goodInfo.purchasePrice"></dy-price>
					<u-icon name="close" color="#909193" size="28" @click="closePopup"></u-icon>
				</view>
				<view class="popup-category">
					<u--text text="类别" size="16" margin="15rpx 0"></u--text>
					<view class="popup-category-list">
						<view
							:class="['popup-category-item', {'popup-category-item-active': goodsTypeIdB == item.goodsMallTypeId}]"
							v-for="item in categoryList" :key="item.goodsTypeName"
							@click="() => loadGoodsList(item.goodsMallTypeId)">
							<view class="popup-category-img">
								<img src="/static/logo.png" style="width: 50rpx; height: 50rpx;" alt="" srcset="" />
							</view>
							<u--text :text="item.goodsTypeName" :color="goodsTypeColor(item.goodsMallTypeId)" size="14"
								margin="0 0 0 8rpx"></u--text>
						</view>
					</view>
				</view>
				<view class="popup-goods">
					<u--text text="服务" size="16" margin="25rpx 0 15rpx 0"></u--text>
					<view class="popup-goods-list">
						<view v-for="item in goodsList" :key="item.name" @click="() => setGoodsMallId(item.goodsMallId)"
							:class="['popup-goods-item flex-primary', {'popup-goods-item-active': goodsMallId == item.goodsMallId}]">
							<u--text :text="item.goodsName" :color="goodsItemColor(item.goodsMallId)"
								style="width: 600rpx;" size="14"></u--text>
							<u--text :text="`¥${item.price}`" style="width: 100rpx;" size="14" align="right"></u--text>
						</view>
					</view>
				</view>
				<view class="popup-footer u-flex-xy-center">
					<view class="bottom-bar-btn" style="width: 600rpx;" @click="confirmBuy">
						确认
					</view>
					<!-- 					<button v-else class="bottom-bar-btn" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumberHandler">登录并购买</button> -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from '@/common/config'
	import ImButton from '@/components/im-button/im-button.vue'
	
	export default {
		data() {
			return {
				staticUrl: config.staticUrl,
				goodsTypeIdA: '',
				goodsTypeIdB: '',
				goodsMallId: '',
				goodInfo: {
					price: 0,
					purchasePrice: 0,
					goodsName: '',
					desc: '免费上门·不满意重洗·洗坏包赔'
				},
				categoryList: [{
					img: '',
					goodsTypeName: '衣鞋任洗'
				}, ],
				goodsList: []
			}
		},
		onLoad(options) {
			this.goodsMallId = options.goodId
		},
		onShow() {
			this.loadDetail()
		},
		components: {
			ImButton
		},
		computed: {
			bottomBarStyle() {
				const styleObj = {
					bottom: this.systemInfo.safeAreaInsets.bottom + 'px'
				}
				return uni.$u.addStyle(styleObj, 'string')
			},
			goodsTypeColor() {
				return (goodsMallTypeId) => {
					return goodsMallTypeId == this.goodsTypeIdB ? '#dd524d' : '#398ade'
				}
			},
			goodsItemColor() {
				return (goodsMallId) => {
					return goodsMallId == this.goodsMallId ? '#dd524d' : '#f1a532'
				}
			}
		},
		methods: {
			setGoodsMallId(goodsMallId) {
				this.goodsMallId = goodsMallId
				const goodInfo = this.goodsList.find(item => item.goodsMallId == this.goodsMallId)
				if (goodInfo) {
					this.goodInfo = goodInfo
				}
			},
			loadGoodsList(goodsTypeIdB) {
				this.goodsTypeIdB = goodsTypeIdB
				this.$u.api['goods/findGoodsListByType']({
					goodsTypeId: this.goodsTypeIdB
				}).then(res => {
					this.goodsList = res.data.data.rows

				})
			},
			loadDetail() {
				this.$u.api['goods/findGoodsDetail']({
					goodsMallId: this.goodsMallId
				}).then(res => {
					this.goodsTypeIdA = res.data.data.goodsMall.goodsTypeIdA
					this.goodsTypeIdB = res.data.data.goodsMall.goodsTypeIdB
					this.loadSecondType()
					this.loadGoodsList(res.data.data.goodsMall.goodsTypeIdB)
					this.goodInfo = res.data.data.goodsMall
				})
			},
			loadSecondType() {
				this.$u.api['goods/getSecondGoodsTypeList']({
					goodsMallTypeId: this.goodsTypeIdA
				}).then(res => {
					this.categoryList = res.data.data
				})
			},
			showBuyPopup() {
				this.$refs.buyPopupRef.open('bottom')
			},
			closePopup() {
				this.$refs.buyPopupRef.close()
			},
			confirmBuy() {
				this.afterPhoneNumber()
			},
			afterPhoneNumber() {
				uni.navigateTo({
					url: '/pages/order/detail/ready?goodId=' + this.goodsMallId
				})
			}
		}
	}
</script>

<style lang="scss">
	.good-detail {
		&-price {
			padding: 10rpx 20rpx;
		}

		.bottom-bar {
			position: fixed;
			width: 100vw;
			justify-content: space-around;
			padding: 0 40rpx;
			box-sizing: border-box;

			&-btn {
				padding: 0 15rpx;
				width: 600rpx;
				background-color: $u-error;
				color: $u-error-light;
				border-radius: 40rpx;
				text-align: center;
				cursor: pointer;
				border: none;
				height: 90rpx;
				line-height: 90rpx;
				box-sizing: border-box;
			}
		}

		&-imgs {
			margin-top: 30rpx;
			display: flex;
			width: 100%;
			padding: 25rpx;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			background-color: #fff;

			image {
				margin-bottom: 25rpx;
			}
		}
	}

	.popup-wrapper {
		padding: 30rpx 30rpx 0;
	}

	.popup-category {
		&-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 20rpx;
		}

		&-item {
			display: flex;
			align-items: center;
			background-color: $u-primary-light;
			padding: 10rpx;
			border-radius: 8rpx;


			&-active {
				background-color: $u-error-disabled;
			}
		}

		&-img {
			display: flex;
			align-items: center;
			// background-color: #fff;
			border-radius: 6rpx;
		}
	}

	.popup-goods {
		&-list {
			display: grid;
			grid-template-columns: 696rpx;
			grid-gap: 20rpx;
			max-height: 50vh;
			overflow-y: auto;
			overflow-x: hidden;
		}

		&-item {
			padding: 15rpx 25rpx;
			background-color: $u-warning-light;
			border-radius: 8rpx;


			&-active {
				background-color: $u-error-disabled;
			}
		}
	}

	.popup-footer {
		margin-top: 25rpx;
		width: 100%;
	}

	.good-detail--selected {
		background-color: #fff;
		padding: 13rpx 25rpx;
		margin-top: 25rpx;
	}
	.customer-btn {
		margin: 0;
		width: 100rpx;
		height: 100rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		border: none;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 20rpx rgba(30, 72, 111, 0.2);
		&:after{
			border: none;
		}
	}
</style>